<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>视频demo - 呵Sever</title>
    <meta id="meta_viewport" name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="format-detection" content="telephone=no"/>
    <link rel="stylesheet" type="text/css" href="../../css/style.min.css">
    <link rel="stylesheet" type="text/css" href="../../icon/iconfont.css">

</head>
<body id="media">

<div id="app">
    <!--<div>
        音频
    </div>

    <div class="audio-item">
        <audio src="../../images/eason_i_do.mp3" controls="controls" class="audio-item">
        </audio>

    </div>

    <br><br>-->

    <div :id="item.id" class="video-item" v-for="item in json_data.list">
        <div class="screen">
            <video preload="auto" :poster="item.poster">
                <!--
                webkit-playsinline=true 阻止IOS设备全屏
                -->
                <source :src="item.source_src" :type="item.type"/>
                Your browser does not support HTML5 video.
            </video>
            <div class="control-play screen-video-controls" @click="video_play('#'+item.id)">
                <a class="iconfont icon-iconfonticonfontbofang" href="javascript:;" >
                </a>
            </div>

            <div class="control-pause screen-video-controls" @click="video_pause('#'+item.id)">
                <a class="iconfont icon-bofang" href="javascript:;" >
                </a>
            </div>
        </div>

        <div class="video-controls">
            <div class="col-1" style="text-align: center">
                <!--<a class="control-load" href="javascript:;" @click="video_load('#'+item.id)">加载</a>-->
                <a class="control-play iconfont icon-iconfonticonfontbofang" href="javascript:;" @click="video_play('#'+item.id)">
                </a>
                <a class="control-pause iconfont icon-bofang" href="javascript:;" @click="video_pause('#'+item.id)">
                </a>
            </div>

            <div class="col-4">
                <div class="video-progress-bar" draggable="false">
                    <div class="total">
                    </div>
                    <!--<div class="buffer">
                    </div>
                    <div class="current">
                    </div>-->
                    <div class="slide-btn">
                    </div>
                </div>
            </div>

            <div class="col-3">
                <div class="video-progress-time">
                    00:00/00:00
                </div>
            </div>
            <div class="col-2">
                <span class="col-4 iconfont icon-yinliang201 volume-control" @click="video_muted('#'+item.id)"></span>
                <!--
                    监听input事件：拖动持续获取值
                    监听change事件：拖动后获取值
                -->
                <span class="col-8 volume-bar">
                    <input  type="range" min="0" max="100" value="100" @input="video_setVolume('#'+item.id,$event)"/>
                </span>

            </div>
            <div class="col-2" style="text-align: center">
                <a href="#" @click="video_launchFullScreen('#'+item.id)">全屏</a>
            </div>
        </div>



    </div>

</div>
<script src="../../js/common.js"></script>
<script src="../../js/demo/video.js"></script>
</body>
</html>